<template>
  <div class="box">
    <div class="result" v-for="data of AuthorList" :key="data.id">{{ data.author }}</div>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, computed, watchEffect } from 'vue';
import { IVideoItem } from '@/views/Home/components/home-video.vue'
import useSearchStore from '@/store/search-searchStore.ts'



const store = useSearchStore()
const AuthorList = ref<IVideoItem[]>([])

onMounted(async () => {
  const res = await axios({
    method: 'get',
    url: '/videosList'
  })


  watchEffect(() => {
    const Author = computed(() => {
      return res.data.result.filter((item: IVideoItem) => {

        // toLowerCase，大写切换为小写
        return item.author.toLowerCase().includes(store.search.toLowerCase())
      })
    })
    AuthorList.value = Author.value
  })

})

</script>
<style scoped lang="scss">
.box {
  margin-top: 5px;

  .result {
    margin-left: 15px;
    padding: 8px 0;
    border-bottom: solid 1.5px rgb(193, 187, 187);
    font-size: .9em;

  }
}
</style>@/store/search-searchStore